import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';
import 'package:vant/src/demos/demos.dart';

class VanDocDemoImageSection extends StatelessWidget {
  const VanDocDemoImageSection({super.key});

  @override
  Widget build(BuildContext context) {
    // const src = "https://img1.baidu.com/it/u=359510896,1243174783&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500";
    const src = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
    const errorSrc = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpegx";
    return Scaffold(
        appBar: AppBar(title: const Text('Image')),
        backgroundColor: kVanBackground2.toColor(context),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0).copyWith(bottom: 40),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20, paddingLeft: 0),
                VanImage.network(src, width: 100, height: 100),
                const VanDocDemoBlockTitle(title: "填充模式", paddingLeft: 0),
                Wrap(
                  spacing: 14,
                  runSpacing: 14,
                  children: BoxFit.values
                      .map((fit) => VanImage.network(
                            src,
                            width: 100,
                            height: 100,
                            fit: fit,
                            child: Padding(
                              padding: const EdgeInsets.only(top: 5),
                              child: Center(child: Text(fit.name)),
                            ),
                          ))
                      .toList(),
                ),
                const VanDocDemoBlockTitle(title: "图片位置", paddingLeft: 0),
                Wrap(
                  spacing: 14,
                  runSpacing: 14,
                  children: [
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      position: Alignment.topLeft,
                      child: const VanDocDemoImageText(label: "cover-left"),
                    ),
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      position: Alignment.topCenter,
                      child: const VanDocDemoImageText(label: "cover-center"),
                    ),
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      position: Alignment.topRight,
                      child: const VanDocDemoImageText(label: "cover-right"),
                    ),
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      fit: BoxFit.contain,
                      position: Alignment.topCenter,
                      child: const VanDocDemoImageText(label: "contain-top"),
                    ),
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      fit: BoxFit.contain,
                      position: Alignment.center,
                      child: const VanDocDemoImageText(label: "contain-center"),
                    ),
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      fit: BoxFit.contain,
                      position: Alignment.bottomCenter,
                      child: const VanDocDemoImageText(label: "contain-bottom"),
                    ),
                  ],
                ),
                const VanDocDemoBlockTitle(title: "圆形图片", paddingLeft: 0),
                Wrap(
                  spacing: 14,
                  runSpacing: 14,
                  children: BoxFit.values
                      .map((fit) => VanImage.network(
                            src,
                            width: 100,
                            height: 100,
                            fit: fit,
                            round: true,
                            child: Padding(
                              padding: const EdgeInsets.only(top: 5),
                              child: Center(child: Text(fit.name)),
                            ),
                          ))
                      .toList(),
                ),
                const VanDocDemoBlockTitle(title: "图片懒加载", paddingLeft: 0),
                VanImage.network(src, width: 100, height: 100, lazyLoad: true),
                const VanDocDemoBlockTitle(title: "加载中提示", paddingLeft: 0),
                Wrap(
                  spacing: 14,
                  runSpacing: 14,
                  children: [
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      child: const Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: Center(child: Text("默认提示")),
                      ),
                    ),
                    VanImage.network(
                      src,
                      width: 100,
                      height: 100,
                      childLoading: const Text("自定义提示"),
                      child: const Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: Center(child: Text("自定义提示")),
                      ),
                    )
                  ],
                ),
                const VanDocDemoBlockTitle(title: "加载失败提示", paddingLeft: 0),
                Wrap(
                  spacing: 14,
                  runSpacing: 14,
                  children: [
                    VanImage.network(
                      errorSrc,
                      width: 100,
                      height: 100,
                      child: const Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: Center(child: Text("默认提示2")),
                      ),
                    ),
                    VanImage.network(
                      errorSrc,
                      width: 100,
                      height: 100,
                      childError: const Text("加载失败"),
                      child: const Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: Center(child: Text("自定义提示2")),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ));
  }
}

class VanDocDemoImageText extends StatelessWidget {
  final String label;

  const VanDocDemoImageText({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 5),
      child: Center(child: Text(label)),
    );
  }
}
